<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="mb-10">
        <div class="mb-10">
          <el-input v-model="toolsName" size="small" placeholder="教具名称" class="w-200 mr-5"></el-input>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            class="mr-10"
            :picker-options="pickerOptions1">
          </el-date-picker>
          <downexcel type="TeachingOutHistory" :disabled="value1 && value1.length>0?false:true"
                     :option="{name: toolsName,start_time:value1&&value1[0]?value1[0]:'',end_time:value1&&value1[1]?value1[1]:''}"
                     :excelName="`${value1&&value1[0]?value1[0]:''}至${value1&&value1[1]?value1[1]:''}${toolsName}`"></downexcel>
        </div>
        <div class="hearder-search">
          <div class="breadcrumb-container input-val-box">
            <el-input v-model="searchForm.name" size="small" placeholder="教具名称" class="w-200 mr-5"></el-input>
            <el-cascader
              v-model="searchForm.cate_id"
              size="small"
              class="mr-5"
              :options="selectList"
              :props="{ checkStrictly: true, value: 'id', label: 'name' }"
              clearable></el-cascader>
            <el-button type="primary" size="small" @click="searchFn('search')"><i class="el-icon-search"></i>搜索
            </el-button>
            <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
          </div>
        </div>

        <div class="toplineBox">
          <div class="toplineBox-left">
            <el-button @click.native="addBook()" size="small">添加教辅具</el-button>
            <downexcel type="teachingList" :option="{cate_id: searchForm.cate_id?searchForm.cate_id[searchForm.cate_id.length-1]:'',name:searchForm.name}"></downexcel>
            <el-upload
              :action="$uploadImg"
              :on-success="handleSuccess"
              :on-progress="handleProgress"
              :show-file-list="false"
              accept=".xls,.xlsx"
              :before-upload="beforeUpload"
              class="el-upload-body mr-10 ml-10">
              <el-button size="small">教辅具导入</el-button>
            </el-upload>
            <el-button size="small" @click="searchVisible=true">查看班级教具</el-button>
            <el-button size="small" plain type="primary" @click="applyVisible=true">采购单入库</el-button>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}类;</p>
          <p class="numberline toplineBox-right">共 {{ sumAll }} 件</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStripe"
          :border="tableBorder"
          tooltip-effect="dark"
          style="width: 100%"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50"
            align="center">
          </el-table-column>
          <el-table-column
            width="80"
            label="ID"
            align="center"
            prop="id">
          </el-table-column>
          <el-table-column
            prop="pic"
            label="缩略图"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <!--              <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
              <ImagePreview :src="scope.row.pic || ''" width="40px" height="40px"></ImagePreview>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="教辅具名称"
            align="center">
          </el-table-column>
          <el-table-column
            label="教具类目"
            align="center">
            <template slot-scope="scope">
              {{ scope.row.cate ? scope.row.cate.name : '未知' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="总数量"
            width="100">
            <template slot-scope="scope">
              <el-button size="small" @click="gotoNumber(scope.row)">{{ scope.row.num }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" align="center">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand" trigger="click">
                <el-button type="primary" size="mini">
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1+'-'+scope.$index">教具入库</el-dropdown-item>
                  <el-dropdown-item :command="2+'-'+scope.$index">进入核销</el-dropdown-item>
                  <el-dropdown-item :command="3+'-'+scope.$index">历史核销</el-dropdown-item>
                  <el-dropdown-item :command="4+'-'+scope.$index">进园记录</el-dropdown-item>
                  <el-dropdown-item :command="5+'-'+scope.$index">编辑教具</el-dropdown-item>
                  <el-dropdown-item :command="6+'-'+scope.$index">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <!--// 进度条-->
    <progressDialog :visible.sync="progressVisible" :progressPercent="progressPercent"></progressDialog>
    <!--    编辑核销-->
    <getWriteOff :visible.sync="getWriteOffVisible" :detailOption="detailOption" @InitFn="InitFn"></getWriteOff>
    <!--    历史核销-->
    <WriteOffHistory :visible.sync="historyVisible" :detailOption="detailOption"></WriteOffHistory>
    <!--    进园记录-->
    <EntryRecords :visible.sync="entryVisible" :detailOption="detailOption"></EntryRecords>
    <!--    编辑教具-->
    <EditTeaching :visible.sync="detailVisible" :detailOption="detailOption" @InitFn="InitFn"></EditTeaching>
    <!--    查看班级教具-->
    <searchClassTearching :visible.sync="searchVisible"></searchClassTearching>
    <!--    教具分布-->
    <Distribution :visible.sync="DistributionVisible" :detailOption="detailOption"></Distribution>
    <!--    采购单入库 applytype 1 物料 2 教具-->
    <Po_receipt :visible.sync="applyVisible" applytype="3" @InitFn="InitFn"></Po_receipt>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import lookTearching from '@/components/dialog/lookTearching.vue'
import progressDialog from '@/components/dialog/progressDialog.vue'
// 20210705
import Distribution from "./popup/Distribution"; // 教具分布
import EditTeaching from "./popup/EditTeaching"; // 教具编辑
import EntryRecords from "./popup/EntryRecords"; // 进园记录
import getWriteOff from "./popup/getWriteOff"; // 核销
import WriteOffHistory from "./popup/WriteOffHistory"; // 历史核销
import searchClassTearching from "./popup/searchClassTearching";
import Po_receipt from "../Materiel/Po_receipt";

export default {
  components: {
    lookTearching,
    progressDialog,
    Distribution,
    EditTeaching,
    EntryRecords,
    getWriteOff,
    WriteOffHistory,
    searchClassTearching,
    Po_receipt
  },
  data() {
    return {
      value1: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      toolsName: '',
      applyVisible: false,
      // 20210705 start
      getWriteOffVisible: false, // 去核销
      historyVisible: false, // 核销历史
      entryVisible: false, // 进园记录
      detailVisible: false, // 编辑教具
      searchVisible: false, // 查询班级教具
      detailOption: null, // 教具信息
      DistributionVisible: false, // 教具分布
      searchForm: {
        name: '',
        cate_id: ''
      }, // 搜索内容
      // 20210705 end
      progressVisible: false,
      progressPercent: 0,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total,
      },
      sumAll: 0,
      selectList: []
    }
  },
  created() {
    this.cateList()
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let data_ = {
        p: this.page.pageindex,
        name: this.searchForm.name
      }
      if(this.searchForm.cate_id){
        data_.cate_id = this.searchForm.cate_id[this.searchForm.cate_id.length-1]
      }
      let data = await this.$fetch(this.api.tools_index, data_);
      if (!data.code) {
        this.arryList = data.list.data;
        this.page.total = data.list.total;
        this.sumAll = data.sum;
      }
    },
    cateList() {
      this.$post(this.api.tools_category_index, {p: 1}).then((response) => {
        if (response.code === 0) {
          this.selectList = this.$handleTree(response.list, 'id', 'tid')
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 添加教辅具 显示弹窗
    addBook() {
      this.detailOption = '';
      this.detailVisible = true
    },
    // 查看教具 分布
    gotoNumber(row) {
      this.detailOption = row // 教具信息
      this.DistributionVisible = true;
    },
    // index分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 删除教具
    handleDetel(index) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon(index) {
      this.$post(this.api.tools_delete, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.arryList.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 入库添加
    addNumber(index) {
      let title = '教具：' + this.arryList[index].name + ';请输入入库数量。'
      let that = this
      this.$prompt(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\d]{1,10}/,
        inputErrorMessage: '入库格式不正确（数字）'
      }).then(({value}) => {
        that.addmateriel(index, value)
      }).catch(() => {
      })
    },
    addmateriel(index, value) {
      this.$post(this.api.tools_put, {tools_id: this.arryList[index].id, number: value}).then((response) => {
        if (response.code === 0) {
          this.InitFn()
          this.$message({
            type: 'success',
            message: '添加成功！ '
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 导入教具进度条
    beforeUpload() {
      this.progressVisible = true
    },
    // 导入教具
    handleProgress(event) {
      this.progressPercent = parseInt(event.percent)
    },
    // 导入教具成功
    handleSuccess(response) {
      this.materielImport(response.data.name) // 上传文件导入
    },
    // 导入物料
    async materielImport(path) {
      let data = await this.$post(this.api.recruittools_import, {file: path})
      if (data.code === 0) {
        this.progressVisible = false;
        this.$message.success(data.msg)
        this.InitFn()
      } else {
        this.$message.error(data.msg)
      }
    },
    handleCommand(command) {
      let command_ = command.split('-')
      let n = this;
      if (Number(command_[0]) === 1) {
        this.addNumber(command_[1])
      }
      //进入核销
      if (Number(command_[0]) === 2) {
        this.detailOption = this.arryList[command_[1]];
        this.getWriteOffVisible = true;
      }
      // 历史核销
      if (Number(command_[0]) === 3) {
        this.detailOption = this.arryList[command_[1]];
        this.historyVisible = true;
      }
      // 进园记录
      if (Number(command_[0]) === 4) {
        this.detailOption = this.arryList[command_[1]];
        this.entryVisible = true;
      }
      // 编辑教具
      if (Number(command_[0]) === 5) {
        this.detailOption = this.arryList[command_[1]];
        this.detailVisible = true
      }
      if (Number(command_[0]) === 6) {
        this.handleDetel(command_[1])
      }
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      if(option==='refresh'){
        this.searchForm.name = ''
        this.searchForm.cate_id = ''
      }
      this.InitFn()
    },
  },
  mounted() {
  }
}
</script>
